<template>
    <div class="car">
        <x-header v-show="!isWeChar">
            <div slot="default" class="common__header--title">投保信息</div>
            <div @click="goBack" slot="overwrite-left"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
        </x-header>
        <car-header></car-header>
        <div class="car-content">
            <group class="car__formPolicy--group">
                <cell class="car-insure-list">
                    <span class="car__list--title" slot="after-title">
                        <img slot="icon" src="~assets/car/edit.png" class="go-back car-list-img">
                        <span style="color: #fff;" class="car__iconspan--title">完善车主信息</span>
                    </span>
                </cell>
                <div class="car__formPolicy">
                    <div>
                        <selector class="carinfo-selector base-input_font carselector-color" ref="defaultValueRef" title="车主类型" :options="carInsuredRelationList" v-model="tprptCarOwnerDto.carInsuredRelation"></selector>

                        <selector v-show="tprptCarOwnerDto.carInsuredRelation!=naturalPerson" class="carinfo-selector base-input_font carselector-color" ref="defaultValueRef" title="企业性质" :options="groupTypeList" v-model="tprptCarOwnerDto.groupType"></selector>
                        </x-input>
                        <x-input v-model="tprptCarOwnerDto.name" placeholder="车主姓名" class="carinfo-input base-input_font" :min="2" :max="18" required>
                            <div class="car__input" slot="label">
                                车主姓名
                            </div>
                        </x-input>
                        <selector @on-change="carOWnerChange(1)" class="carinfo-selector base-input_font carselector-color" ref="defaultValueRef" title="客户类型" :options="ownerTypeList" v-model="tprptCarOwnerDto.natureOfRole"></selector>
                        <selector class="carinfo-selector base-input_font carselector-color" ref="defaultValueRef" title="证件类型" :options="idTypeList" v-model="tprptCarOwnerDto.idType"></selector>

                        <x-input v-model="tprptCarOwnerDto.idNo" @on-blur="carOwnerBlur()" placeholder="车主证件号" class="carinfo-input base-input_font" :min="2" :max="18" required>
                            <div class="car__input" slot="label">
                                证件号
                                <!-- 车主证件号 -->
                                <!--carid-input <selector class="car-idtype-selector base-input_font carselector-color" ref="defaultValueRef" :options="idTypeList" v-model="tprptCarOwnerDto.idType"></selector> -->
                            </div>
                        </x-input>
                        <datetime v-show="tprptCarOwnerDto.natureOfRole==PERSONAL&&isIdCarOwner" placeholder="出生日期" :readonly="true" v-model="tprptCarOwnerDto.brithday">
                            <div class="car__input" slot="title">
                                出生日期
                            </div>
                        </datetime>
                        <datetime placeholder="出生日期" v-show="!isIdCarOwner&&tprptCarOwnerDto.natureOfRole==PERSONAL" v-model="tprptCarOwnerDto.brithday" :start-date="beginTime" :end-date="endTime" confirm-text="完成" cancel-text="取消">
                            <div class="car__input" slot="title">
                                出生日期
                            </div>
                        </datetime>
                        <!-- <x-input v-model="tprptCarOwnerDto.idNo" v-show="tprptCarOwnerDto.natureOfRole==GROUP" placeholder="组织机构代码" class="carinfo-input base-input_font" :min="2" :max="20" required>
                            <div class="car__input" slot="label">
                                统一社会信用代码
                            </div>
                        </x-input> -->

                        <x-input v-model="tprptCarOwnerDto.cellPhoneNo" placeholder="车主电话" class="carinfo-input" :min="9" :max="11" required>
                            <div class="car__input base-input_font" slot="label">
                                车主电话
                            </div>
                        </x-input>
                        <x-input v-model="tprptCarOwnerDto.address" placeholder="车主地址" class="carinfo-input" :min="2" :max="100" required>
                            <div class="car__input base-input_font" slot="label">
                                车主地址&nbsp
                            </div>
                        </x-input>
                    </div>
                </div>
            </group>

            <group class="car-shadow">

                <cell>
                    <div class="badge-value" slot>
                        <check-icon :value.sync="appliIsOwner">
                            <span class="car__policyHolderType car__middle">同车主</span>
                        </check-icon>
                    </div>
                    <span class="car__list--title" slot="after-title">
                        <img class="go-back car-list-img" src="~assets/car/insure.png">
                        <span class="car__iconspan--title">
                            投保人信息</span>
                    </span>
                </cell>

                <div v-show="!appliIsOwner" class="car__formPolicy">
                    <div>

                        </x-input>
                        <x-input v-model="tprptApplicantDto.name" placeholder="姓名" class="carinfo-input" :min="2" :max="18" required>
                            <div class="car__input" slot="label">
                                姓名
                                <!-- <img src="~assets/x3/ico/icon-card.png" class="icon-img">&nbsp&nbsp -->
                            </div>
                        </x-input>
                        <selector class="carinfo-selector carselector-color" ref="defaultValueRef" title="客户类型" @on-change="appliChange(1)" :options="ownerTypeList" v-model="tprptApplicantDto.natureOfRole"></selector>

                        <selector class="carinfo-selector base-input_font carselector-color" ref="defaultValueRef" title="证件类型" :options="appliTypeList" v-model="tprptApplicantDto.idType"></selector>

                        <x-input v-model="tprptApplicantDto.idNo" @on-blur="appliBlur()" placeholder="证件号" class="carinfo-input" :min="2" :max="18" required>
                            <div class="car__input" slot="label">
                                证件号
                                <!-- <img src="~assets/x3/ico/icon-card.png" class="icon-img">&nbsp&nbsp -->
                            </div>
                        </x-input>
                        <datetime placeholder="出生日期" :readonly="true" v-show="isIdAppli" v-model="tprptApplicantDto.brithday">
                            <div class="car__input" slot="title">
                                出生日期
                            </div>
                        </datetime>
                        <datetime placeholder="出生日期" v-show="!isIdAppli" v-model="tprptApplicantDto.brithday" :start-date="beginTime" :end-date="endTime" confirm-text="完成" cancel-text="取消">
                            <div class="car__input" slot="title">
                                出生日期
                            </div>
                        </datetime>
                        <!-- <x-input v-model="tprptApplicantDto.idNo" v-show="tprptApplicantDto.natureOfRole==GROUP" placeholder="组织机构代码" class="carinfo-input" :min="2" :max="20" required>
                            <div class="car__input" slot="label">
                                统一社会信用代码
                            </div>
                        </x-input> -->
                        <x-input v-model="tprptApplicantDto.cellPhoneNo" placeholder="电话" class="carinfo-input" :min="9" :max="11" required>
                            <div class="car__input" slot="label">
                                电话
                            </div>
                        </x-input>
                        <x-input v-model="tprptApplicantDto.address" placeholder="地址" class="carinfo-input" :min="2" :max="100" required>
                            <div class="car__input" slot="label">
                                地址&nbsp
                            </div>
                        </x-input>

                    </div>
                </div>

            </group>

            <group class="car-shadow">
                <cell class="carInsure">
                    <div class="badge-value" slot>
                        <!-- <div class="car__policyHolderType car__middle">同投保人</div> -->
                        <check-icon :value.sync="insureIsAppli">
                            <span class="car__policyHolderType car__middle">同投保人</span>
                        </check-icon>
                        <!-- <input v-model="insureIsAppli" type="checkbox" class="weui-switch"> -->
                    </div>
                    <div class="badge-value" slot>
                        <!-- <div class="car__policyHolderType car__middle">同车主</div> -->
                        <check-icon :value.sync="insureIsOwner">
                            <span class="car__policyHolderType car__middle">同车主</span>
                        </check-icon>
                        <!-- <input v-model="insureIsOwner" type="checkbox" class="weui-switch"> -->
                    </div>
                    <span class="car__list--title" slot="after-title">
                        <!-- <span class="car__iconspan"></span> -->
                        <img class="go-back car-list-img" src="~assets/car/appli.png">
                        <span class="car__iconspan--title">被保人信息</span>
                    </span>
                </cell>

                <div v-show="insShowInsureInput" class="car__formPolicy">
                    <div>
                        </x-input>
                        <x-input placeholder="姓名" v-model="tprptInsuredDto.name" class="carinfo-input" :min="2" :max="18" required>
                            <div class="car__input" slot="label">
                                姓名
                                <!-- <img src="~assets/x3/ico/icon-card.png" class="icon-img">&nbsp&nbsp -->
                            </div>
                        </x-input>
                        <selector @on-change="insureChange(1)" class="carinfo-selector carselector-color" ref="defaultValueRef" title="类型" :options="ownerTypeList" v-model="tprptInsuredDto.natureOfRole"></selector>

                        <selector class="carinfo-selector base-input_font carselector-color" ref="defaultValueRef" title="证件类型" :options="insureIdTypeList" v-model="tprptInsuredDto.idType"></selector>

                        <x-input v-model="tprptInsuredDto.idNo" @on-blur="insureBlur()" placeholder="证件号" class="carinfo-input" :min="2" :max="18" required>
                            <div class="car__input" slot="label">
                                证件号
                                <!-- <img src="~assets/x3/ico/icon-card.png" class="icon-img">&nbsp&nbsp -->
                            </div>
                        </x-input>
                        <datetime placeholder="出生日期" :readonly="true" v-show="isIdInsure" v-model="tprptInsuredDto.brithday">
                            <div class="car__input" slot="title">
                                出生日期
                            </div>
                        </datetime>
                        <datetime placeholder="出生日期" v-show="!isIdInsure" v-model="tprptInsuredDto.brithday" :start-date="beginTime" :end-date="endTime" confirm-text="完成" cancel-text="取消">
                            <div class="car__input" slot="title">
                                出生日期
                            </div>
                        </datetime>
                        <!-- <x-input v-show="tprptInsuredDto.natureOfRole==GROUP" placeholder="组织机构代码" class="carinfo-input" :min="2" :max="20" required>
                            <div class="car__input" slot="label">
                                统一社会信用代码
                            </div>
                        </x-input> -->
                        <x-input v-model="tprptInsuredDto.cellPhoneNo" placeholder="联系电话" class="carinfo-input" :min="9" :max="11" required>
                            <div class="car__input" slot="label">
                                联系电话
                            </div>
                        </x-input>
                        <x-input v-model="tprptInsuredDto.address" placeholder="车主地址" class="carinfo-input" :min="2" :max="100" required>
                            <div class="car__input" slot="label">
                                地址&nbsp
                            </div>
                        </x-input>

                    </div>
                </div>

            </group>
        </div>
        <div style="height: 60px;"></div>
        <!-- <div class="car__footer">
            <div @click="goCarInfo" class="car__rightbtn">下一步</div>
        </div> -->

        <div class="car_footer">
            <div class="car_leftbtn">
                <div class="details-alert">
                    <img slot="icon" style="width: 15px;" src="~assets/x3/ico/smal-1.png">&nbsp提示:&nbsp同车主同投保人投保更便捷
                </div>
                <!-- <span>999</span> -->
            </div>
            <div @click="goCarInfo()" class="car_rightbtn">下一步</div>
        </div>
        <!-- <sele-country></sele-country> -->
        <!-- 投保声明  理赔须知 -->

    </div>
</template>

<script>
import carHeader from "src/components/car/carHeader";
import { RequestUrl } from "src/common/url";
import Config from "src/common/config/carConfig";
import {
    Gender,
    RouteUrl,
    OWNER_TYPE,
    Car_Mutations,
    PerIdentifyType,
    EntIdentifyType,
    intervalTime,
    Mutations,
    CAR_INSURED_RELATION,
    CAR_EntIdentifyType
} from "src/common/const";
import {
    XHeader,
    Group,
    Cell,
    XInput,
    Datetime,
    XSwitch,
    Selector,
    XButton,
    XDialog,
    CellFormPreview,
    Actionsheet,
    TransferDom,
    Toast,
    CheckIcon
} from "vux";
import Validation from "src/common/util/validation";
import DateUtil from "src/common/util/dateUtil";
import { mapState, mapActions } from "vuex";
export default {
    components: {
        CellFormPreview,
        XDialog,
        Selector,
        XHeader,
        Group,
        Cell,
        XInput,
        Datetime,
        XSwitch,
        XButton,
        Actionsheet,
        TransferDom,
        Toast,
        CheckIcon,
        carHeader
    },
    computed: mapState({
        // insure: "insure",
        isLoading: "isLoading",
        user: "user",

        saveInsure: "saveInsure",
        detailsStore: "detailsStore",
        isWeChar: "isWeChar",
        carAddr: "carAddr",
        shareData: "shareData",
        initIndexData: "initIndexData",
        car: "car"
    }),
    data() {
        return {
            idTypeList: [],
            insureIdTypeList: [],
            appliTypeList: [],
            type: "insure",
            beginTime: DateUtil.getDateyMdSubtract(intervalTime.YEAR),
            endTime: DateUtil.getNowDateStr_Ymd(),
            isIdCarOwner: false,
            isIdAppli: false,
            isIdInsure: false,

            appliClass: "",

            insureClass: "",

            appliIsOwner: true,

            insureIsAppli: true,

            insureIsOwner: false,

            insShowInsureInput: false,

            PERSONAL: OWNER_TYPE.PERSONAL,
            GROUP: OWNER_TYPE.GROUP,
            ownerTypeList: [],
            carInsuredRelationList: [],
            groupType: "0",
            ownerType: OWNER_TYPE.PERSONAL,
            groupTypeList: [],  // 企业性质
            datatime: DateUtil.getNowDateStr_Ymd(),
            naturalPerson: CAR_INSURED_RELATION.NATURAL_PERSON,
            noNaturalPerson: CAR_INSURED_RELATION.NO_NATURAL_PERSON,
            buildStructure: "",
            tprptCarOwnerDto: {           //车主信息..
                applicantId: "",
                flowId: "",
                name: "",
                idType: PerIdentifyType.ID_CAR,
                idNo: "",
                cellPhoneNo: "",
                address: "",
                email: "",
                gental: "",
                brithday: "",
                applicantType: "",
                groupType: "0",
                natureOfRole: OWNER_TYPE.PERSONAL,
                carInsuredRelation: CAR_INSURED_RELATION.NATURAL_PERSON
            },
            tprptApplicantDto: {        //投保人信息
                applicantId: "",
                flowId: "",
                name: "",
                idType: PerIdentifyType.ID_CAR,
                idNo: "",
                cellPhoneNo: "",
                address: "",
                email: "",
                gental: "",
                brithday: "",
                applicantType: "",
                natureOfRole: OWNER_TYPE.PERSONAL
            },
            tprptInsuredDto: {        //被保险人
                applicantId: "",
                flowId: "",
                name: "",
                idType: PerIdentifyType.ID_CAR,
                idNo: "",
                cellPhoneNo: "",
                address: "",
                email: "",
                gental: "",
                brithday: "",
                applicantType: "",
                natureOfRole: OWNER_TYPE.PERSONAL
            },

            // defaultMen: "法定受益人"
        };
    },
    watch: {
        // 'tprptInsuredDto.natureOfRole': {
        //     handler(cur, old) {
        //         debugger
        //     }
        // },
        'car.isQueryCar': {
            handler(cur, old) {
                if (!cur) {
                    this.setQueryInfo();
                }
            }
        },
        // appliIsOwner(cur, old) {
        //     if (cur) {
        //         this.appliClass = "";
        //     } else {
        //         this.appliClass = "car__formPolicy--group";
        //     }
        // },
        // insShowInsureInput(cur, old) {
        //     if (cur) {
        //         this.insureClass = "car__formPolicy--group";
        //     } else {
        //         this.insureClass = "";
        //     }
        // },
        insureIsAppli(cur, old) {
            if (cur) {
                this.insShowInsureInput = false;
                if (this.insureIsOwner) {
                    this.insureIsOwner = false;
                }
            }
            if (!cur && !this.insureIsOwner) {
                this.insShowInsureInput = true;
            } else {
                this.insShowInsureInput = false;
            }
        },
        insureIsOwner(cur, old) {
            if (cur) {
                this.insShowInsureInput = false;
                if (this.insureIsAppli) {
                    this.insureIsAppli = false;
                }
            }

            if (!cur && !this.insureIsAppli) {
                this.insShowInsureInput = true;
            } else {
                this.insShowInsureInput = false;
            }
        },
    },
    filters: {
    },
    methods: {
        carOWnerChange(val) {
            //客户类型为个人
            if (this.tprptCarOwnerDto.natureOfRole == this.PERSONAL) {
                this.idTypeList = Config.getIdType();
                if (val != 'init') {
                    this.tprptCarOwnerDto.idType = PerIdentifyType.ID_CAR;
                }
            } else if (this.tprptCarOwnerDto.natureOfRole == this.GROUP) {
                this.idTypeList = Config.getIdTypeEnt();
                if (val != 'init') {
                    this.tprptCarOwnerDto.idType = CAR_EntIdentifyType.ORGANIZATION;
                }
                // this.tprptCarOwnerDto.carInsuredRelation = this.noNaturalPerson;
            } else {
                this.idTypeList = Config.getIdType();
                this.tprptCarOwnerDto.natureOfRole = this.PERSONAL;
                this.tprptCarOwnerDto.idType = PerIdentifyType.ID_CAR;
            }
        },
        insureChange(val) {
            //客户类型为个人
            if (this.tprptInsuredDto.natureOfRole == this.PERSONAL) {
                this.insureIdTypeList = Config.getIdType();
                if (val != 'init') {
                    this.tprptInsuredDto.idType = PerIdentifyType.ID_CAR;
                }
            } else if (this.tprptInsuredDto.natureOfRole == this.GROUP) {
                this.insureIdTypeList = Config.getIdTypeEnt();
                if (val != 'init') {
                    this.tprptInsuredDto.idType = CAR_EntIdentifyType.ORGANIZATION;
                }
            } else {
                this.insureIdTypeList = Config.getIdType();
                this.tprptInsuredDto.natureOfRole = this.PERSONAL;
                this.tprptInsuredDto.idType = PerIdentifyType.ID_CAR;
            }
        },
        appliChange(val) {
            //客户类型为个人
            if (this.tprptApplicantDto.natureOfRole == this.PERSONAL) {
                this.appliTypeList = Config.getIdType();
                if (val != 'init') {
                    this.tprptApplicantDto.idType = PerIdentifyType.ID_CAR;
                }
            } else if (this.tprptApplicantDto.natureOfRole == this.GROUP) {
                this.appliTypeList = Config.getIdTypeEnt();
                if (val != 'init') {
                    this.tprptApplicantDto.idType = CAR_EntIdentifyType.ORGANIZATION;
                }
            } else {
                this.appliTypeList = Config.getIdType();
                this.tprptApplicantDto.natureOfRole = this.PERSONAL;
                this.tprptApplicantDto.idType = PerIdentifyType.ID_CAR;
            }
        },
        carOwnerBlur() {
            let isIdCarGet = false;
            let id = this.tprptCarOwnerDto.idNo;
            if (Validation.isIdNumber(id)) {
                // this.tprptCarOwnerDto.idType = PerIdentifyType.ID_CAR;
                this.tprptCarOwnerDto.brithday = Validation.getBirthByidCardNumber(id);
                this.tprptCarOwnerDto.gental = Validation.getGenderByidCardNumber(id);
                isIdCarGet = true;
            } else {
                // this.tprptCarOwnerDto.idType = PerIdentifyType.OTHER;
                // this.tprptCarOwnerDto.brithday = DateUtil.getNowDateStr_Ymd();
                this.tprptCarOwnerDto.gental = "";
                isIdCarGet = false;
            }

            let query = {
                _this: this,
                idCar: this.tprptCarOwnerDto.idNo,
                isIdCarGet: isIdCarGet,
                type: "carInsure"
            }
            this.$common.storeCommit(this, Mutations.APPLI_FIND_ID_CAR, query);
        },
        appliBlur() {
            let id = this.tprptApplicantDto.idNo;
            if (Validation.isIdNumber(id)) {
                // this.tprptApplicantDto.idType = PerIdentifyType.ID_CAR;
                this.tprptApplicantDto.brithday = Validation.getBirthByidCardNumber(id);
                this.tprptApplicantDto.gental = Validation.getGenderByidCardNumber(id);
            } else {
                // this.tprptApplicantDto.idType = PerIdentifyType.OTHER;
                // this.tprptApplicantDto.brithday = DateUtil.getNowDateStr_Ymd();
                this.tprptApplicantDto.gental = "";
            }

        },
        insureBlur() {
            let id = this.tprptInsuredDto.idNo;
            if (Validation.isIdNumber(id)) {
                // this.tprptInsuredDto.idType = PerIdentifyType.ID_CAR;
                this.tprptInsuredDto.brithday = Validation.getBirthByidCardNumber(id);
                this.tprptInsuredDto.gental = Validation.getGenderByidCardNumber(id);
            } else {
                // this.tprptInsuredDto.idType = PerIdentifyType.OTHER;
                // this.tprptInsuredDto.brithday = DateUtil.getNowDateStr_Ymd();
                this.tprptInsuredDto.gental = "";
            }

        },
        showErrorMsg(errorMsg) {
            this.$vux.alert.show({ content: this.$common.alertMsg(errorMsg, "red;") });
            // setTimeout(() => {
            //     this.$vux.alert.hide();
            // }, 3000);
            return false;
        },
        baseVal() {
            $('.weui-input').focus();
            $('.weui-input').blur();

            if (!this.commonVal(this.tprptCarOwnerDto, "车主")) {
                return false;
            }
            if (!this.appliIsOwner && !this.commonVal(this.tprptApplicantDto, "投保人")) {
                return false;
            }
            if (!this.insureIsAppli && !this.insureIsOwner && !this.commonVal(this.tprptInsuredDto, "被保人")) {
                return false;
            }
            return true;
        },
        commonVal(dto, role) {
            if (dto.name == "") {
                return this.showErrorMsg(role + "姓名不能为空!");
            }
            if (dto.natureOfRole == OWNER_TYPE.PERSONAL) {
                if (dto.idNo == "") {
                    return this.showErrorMsg(role + "证件号码不能为空!");
                } else if (dto.idNo.length == "18") {
                    if (!Validation.isIdNumber(dto.idNo)) {
                        return this.showErrorMsg(role + "证件号不是有效身份证号");
                    }
                }
                // if (dto.email != "") {
                //     if (!Validation.isEmail(dto.email.toLowerCase())) {
                //         return this.showErrorMsg(role + "邮箱格式不正确");
                //     }
                // } else {
                //     return this.showErrorMsg(role + "邮箱不能为空不正确");
                // }
            } else {
                if (dto.idNo == "") {
                    return this.showErrorMsg(role + "统一社会信用代码不能为空!");
                } else {
                    if (Validation.isSpecialCharacters1(dto.idNo)) {
                        return this.showErrorMsg(role + "统一社会信用代码不能有特殊字符!");
                    }
                }
            }
            if (dto.cellPhoneNo == "") {
                return this.showErrorMsg(role + "联系电话不能为空");
            } else {
                if (Validation.isErrPhone(dto.cellPhoneNo)) {
                    return this.showErrorMsg(role + "联系电话格式错误");
                }
            }

            if (dto.address == "") {
                return this.showErrorMsg(role + "地址不能为空");
            }
            return true;
        },
        goCarInfo() {
            if (this.baseVal()) {
                this.$common.goUrl(this, RouteUrl.CAR_INFO);
            }
        },
        goBack() {
            this.$common.goBackUrl(this, RouteUrl.CAR_INSURE);
            // this.$common.goBack(this);
        },
        setQueryInfo() {
            let _this = this;
            // if (this.car.curInfo.renewalFlag == "1") {
            if (typeof (this.car.carInfoList[this.car.licenseNo]) == "undefined") {

            } else {
                // this.tprptCarOwnerDto = this.car.carInfoList[this.car.licenseNo].tprptCarOwnerDto;
                // this.tprptApplicantDto = this.car.carInfoList[this.car.licenseNo].tprptApplicantDto;
                // this.tprptInsuredDto = this.car.carInfoList[this.car.licenseNo].tprptInsuredDto;
                // //没有查询到车主信息  默认前面输入的车主信息
                // if (this.tprptCarOwnerDto.name == "") {
                //     this.tprptCarOwnerDto.name = this.car.carInsureData.carOwner;
                // }
                setTimeout(() => {
                    // debugger
                    _this.tprptCarOwnerDto = _this.car.carInfoList[_this.car.licenseNo].tprptCarOwnerDto;
                    _this.tprptApplicantDto = _this.car.carInfoList[_this.car.licenseNo].tprptApplicantDto;

                    _this.tprptInsuredDto = _this.car.carInfoList[_this.car.licenseNo].tprptInsuredDto;
                    //没有查询到车主信息  默认前面输入的车主信息
                    if (_this.tprptCarOwnerDto.name == "") {
                        _this.tprptCarOwnerDto.name = _this.car.carInsureData.carOwner;
                    }
                    _this.appliIsOwner = _this.car.carInfoList[_this.car.licenseNo].appliIsOwner;
                    if (_this.tprptCarOwnerDto.brithday == "" || _this.tprptCarOwnerDto.brithday == null) {
                        _this.tprptCarOwnerDto.brithday = DateUtil.getNowDateStr_Ymd();
                    }
                    _this.insureIsAppli = _this.car.carInfoList[_this.car.licenseNo].insureIsAppli;
                    if (_this.tprptApplicantDto.brithday == "" || _this.tprptApplicantDto.brithday == null) {
                        _this.tprptApplicantDto.brithday = DateUtil.getNowDateStr_Ymd();
                    }
                    _this.insureIsOwner = _this.car.carInfoList[_this.car.licenseNo].insureIsOwner;
                    if (_this.tprptInsuredDto.brithday == "" || _this.tprptInsuredDto.brithday == null) {
                        _this.tprptInsuredDto.brithday = DateUtil.getNowDateStr_Ymd();
                    }
                    _this.carOwnerBlur();
                    _this.appliBlur();
                    _this.insureBlur();
                }, 100);
            }
        },
        saveData() {
            if (sessionStorage["CAR_FORM_URL"] != "/") {
                this.$common.storeCommit(this, Car_Mutations.SAVE_DATA_CAR_INFO, this);
                // this.carOWnerChange('init');
            }
        }
    },
    beforeRouteEnter(to, from, next) {
        sessionStorage["CAR_FORM_URL"] = from.path;
        next();
    },
    beforeMount() {
    },
    beforeDestroy() {
        this.saveData();
    },
    mounted() {
        document.title = '填写投保单';
        if (sessionStorage["CAR_FORM_URL"] == "/") {
            this.$common.goUrl(this, RouteUrl.CAR_INSURE);
            return;
        }
        if (!this.car.isQueryCar) {
            this.setQueryInfo();
        }
        //初始化，没有footer

        // window.addEventListener('load', function() {
        //     _this.saveData();
        // });
        // window.addEventListener('popstate', function(ev) {
        //     _this.saveData();
        // });
        this.groupTypeList = Config.getGroupType();
        this.ownerTypeList = Config.getOwnerType();
        this.carInsuredRelationList = Config.getCarInsuredRelation();
        // this.idTypeList = Config.getIdType();
        // this.hourseType = Config.getOwnerType();
        //添加上一个页面的价钱

    }
};
</script>

<style lang="scss">
@import "~styles/carCommon";
</style>

<style  lang="scss">
.car__iconspan {
  position: absolute;
  margin-top: 4px;
  width: 4px;
  height: 18px;
  background-color: #c8161d;
}

.car__list--title {
  font-size: 15px;
  color: #c8161d;
}

.car__iconspan--title {
  margin-left: 9px;
  font-size: 14px;
}

.car__formPolicy {
  border: 1px solid #e7e7e7;
  margin: 0 0px;
}

.car__formPolicy--group {
  .vux-no-group-title {
    // padding-bottom: 20px;
  }
}

.car__footer {
  position: fixed;
  bottom: 0px;
  z-index: 5;
  width: 100%;
  height: 47px;
  background-color: white;
  div {
    height: 100%;
    line-height: 47px;
    text-align: center;
    font-size: 20px;
  }
  box-shadow: 0px 0px 10px 1px #efefef;
}
.car-input {
  .weui-cell__bd {
    input {
      text-transform: uppercase;
    }
  }
}

.car__rightbtn {
  background: #c8161d;
  color: #fff;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
  transition: opacity 0.1s;
}

.car__input-datatime {
  height: 24px;
  line-height: 0px;
  font-size: 14px;
  //   color: #7f7f7f !important;
  .weui-cell__ft {
    text-align: justify;
    color: #999999;
  }
}
.carInsure {
  .weui-cell__ft {
    display: -webkit-box;
  }
}

.car__input {
  line-height: 0px;
  font-size: 14px;
  //   color: #7f7f7f !important;
  .weui-cell__ft {
    text-align: justify;
    color: #999999;
  }
}
.carinfo-selector {
  .weui-label {
    line-height: 0px;
    font-size: 14px;
  }
  select {
    direction: rtl;
  }
}
input::-webkit-input-placeholder {
  font-size: 14px;
  color: #7f7f7f;
}
.car__policyHolderType {
  font-size: 12px;
  color: #7f7f7f;
}
.car__middle {
  display: initial;
  vertical-align: bottom;
}

.carinfo-input {
  input {
    text-align: right;
  }
}
</style>
